<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons icon-arrow-left" @tap.stop="handleNavBack"></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
        >{{ $t("my.languageSettings") }}</view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons" style="font-size:38rpx;"></view>
      </view>
    </cloudHeader>
    <view class="gbody main">
      <view class="grace-list grace-margin-top grace-bg-white">
        <view
          class="grace-list-items grace-padding"
          v-for="(locale, index) in locales"
          :key="index"
          @tap.stop="onTapSwitchLang(locale.value)"
        >
          <view class="grace-list-body grace-border-b">
            <view class="grace-list-title">
              <text class="grace-list-title-text">{{ locale.title }}</text>
            </view>
          </view>
          <text class="grace-list-arrow-right">
            <radio class="radiobox" color="#343A45" :checked="currentLocale == locale.value"></radio>
          </text>
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters("system", ["locales"]),
    ...mapGetters({ currentLocale: "system/locale" })
  },
  methods: {
    ...mapActions("system", ["switchLocale"]),
    onTapSwitchLang(locale) {
      this.switchLocale({ locale });
    },
    onTapSaveLang: function() {
      this.$i18n.locale = this.switchLang;
      setUpEndurance(this.switchLang);
      uni.navigateBack({});
    },
    goback: function() {
      uni.navigateBack({});
    }
  }
};
</script>

<style scoped>
.save {
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
}
.select-lang {
  width: 710rpx;
  padding: 20rpx;
}
</style>
